<template>
  <div class="page-wapper">
    <!-- <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-redpacket_fill"></i> 一起来看烟花咯
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->
    <div class="container wrapper" ref="containerRef">
      <canvas id="canvas"></canvas>

      <!-- 滚动文字 -->
      <div class="scroll_box">
        <ul class="bg-scroll">
          <!-- <img src="../assets/images/name.png" alt="" /> -->
          <li
            v-for="(item, i) in list"
            :key="i"
            :ref="'rol_' + i"
            :class="{ anim: animate == true }"
          >
            <!-- :class="colorClass" -->
            <span class="text_box light_text orange_light">{{
              item.text
            }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Fireworks from "../utils/fireworks";
let timer = null;
let scrollTimer = null;

export default {
  name: "donate",
  data() {
    return {
      animate: false,
      list: [
        {
          text: "2022年，不必为谁改变，只管一往无前",
        },
        {
          text: "2022年，按照自己喜欢的活法，就是最好的活法",
        },
        {
          text: "2022年，愿时光能缓，美好如初",
        },
        {
          text: "2022年，努力过得充实，别给自己难过的机会",
        },
        {
          text: "2022年，做颗星星，有棱有角，还会发光",
        },
        {
          text: "2022年，愿你能披荆斩棘，也能被人疼爱",
        },
        {
          text: "2022年，愿你心藏善良，眼带光芒，活成想要的模样",
        },
        {
          text: "2022年，想陪你三餐四季，煮茶赏花",
        },
        {
          text: "2022年，愿你活得烈马青葱，不为他人目光所困",
        },
        {
          text: "2022年，愿你无论喜忧，都能坦然以对",
        },
        {
          text: "2022年，那就祝我们都能跟真诚的人硬碰硬",
        },
        {
          text: "2022年，希望永远有人带着诚意来爱你",
        },
        {
          text: "2022年，日出有盼日落有念 所有美好 皆如你所愿 ",
        },
        {
          text: "2022年，要在以后的生活中找到最温柔的光",
        },
        {
          text: "2022年，愿屏幕前的小笨蛋 病毒不沾平安喜乐 得偿所愿",
        },
        {
          text: "2022年，对的要坚持错的要遗忘 世间山河之广 祝你如愿以偿",
        },
        {
          text: "2022 更胜一筹",
        },
        {
          text: " “The Next is New（接下来的都是崭新的一切噢 ）”",
        },
      ],
      textColorType: 0,
      // 烟花背景参数----
      canvas: "",
      ctx: "",
      canvasWidth: "",
      canvasHeight: "",
      fworks: null,
      lastTime: "",
      newTime: "",
    };
  },
  mounted() {
    window.addEventListener(
      "resize",
      function () {
        this.canvas = document.getElementById("canvas");
        this.canvas.width = this.canvasWidth =
          this.$refs.containerRef.offsetWidth;
        this.canvas.height = this.canvasHeight =
          this.$refs.containerRef.offsetHeight;
      },
      false
    );
    this.canvas = document.getElementById("canvas");
    this.canvas.width = this.canvasWidth = this.$refs.containerRef.offsetWidth;
    this.canvas.height = this.canvasHeight =
      this.$refs.containerRef.offsetHeight;
    console.log("this.canvasWidth", this.canvasWidth);
    console.log("this.canvasHeight", this.canvasHeight);
    this.initFireworks(this.canvasWidth, this.canvasHeight);
    scrollTimer = setInterval(this.scroll, 2000);
  },
  beforeDestroy() {
    if (scrollTimer) clearInterval(scrollTimer);
    if (timer) window.cancelAnimationFrame(timer);
  },
  computed: {
    colorClass() {
      let color = "";
      switch (this.textColorType) {
        case 0:
          color = "orange_light";
          break;
        case 1:
          color = "red_light";
          break;
        case 2:
          color = "blue_light";
          break;
        case 3:
          color = "yellow_light";
          break;
      }
      return color;
    },
  },
  methods: {
    // canvas 烟花背景
    initFireworks(w, h) {
      this.fworks = new Fireworks(w, h);
      this.lastTime = new Date();
      this.animateStart();
    },
    animateStart() {
      timer = window.requestAnimFrame(this.animateStart);
      this.newTime = new Date();
      if (this.newTime - this.lastTime > 500 + (this.canvasHeight - 2200) / 2) {
        // this.fworks.currentHue = this.getRandom(this.fworks.hueMin, this.fworks.hueMax)
        this.fworks.color = Math.random() * 10 > 2 ? 1 : 0;
        const x = this.getRandom(
          this.canvasWidth / 10,
          (this.canvasWidth * 9) / 10
        );
        const y = this.getRandom(50, (this.canvasHeight * 2) / 3);
        // const y = this.getRandom(50, 50);
        const bigboom = this.fworks.createFireworks(x, this.canvasHeight, x, y);
        this.lastTime = this.newTime;
      }
    },
    getRandom(a, b) {
      return Math.random() * (b - a) + a;
    },
    // 滚动
    scroll() {
      const con1 = this.$refs.rol_0;
      con1.style.transform = "translateY(100%)";
      this.animate = false;
      this.textColorType = Math.round(this.getRandom(0, 3));
      console.log("this.textColorType =>", this.textColorType);
      setTimeout(() => {
        this.list.push(this.list[0]);
        this.list.shift();
        con1.style.transform = "translateY(0)";
        this.animate = true;
      }, 0);
    },
  },
};
</script>

<style lang="less" scoped>
#canvas {
  width: 100%;
  height: 100%;
}
.wrapper {
  background-color: rgba(0, 0, 0, 0.9);
  // background-image: url(../assets/img/2022_bg/2022_bg_0.jpg) center top
  //   no-repeat;
  background-image: url(../assets/img/2022_bg/2022_bg_0.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
}

.scroll_box {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  color: #fff;
  .bg-scroll {
    position: relative;
    // background: url("../assets/images/phone.png") center no-repeat;
    // background-size: 100%;
    width: 100%;
    height: 50px;
    overflow: hidden;
    > li {
      height: 50px;
      line-height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .text_box {
    margin: 0 auto;
    display: block;
    line-height: 50px;
    font-size: 18px;
    color: #fff;
  }
  .anim {
    transition: transform 0.5s linear;
    will-change: transform;
  }
}
</style>
